<template>
  <wallpaper />
  <div class="login">
    <form class="form_container">
      <div class="logo_container">
        <logo />
      </div>
      <div class="title_container">
        <p class="title">登录 BIU-FLINK</p>
        <span class="subtitle">登录BIU-FLINK管理员，设置与管理Flink作业任务</span>
      </div>
      <input name="username" style="display: none" aria-hidden="true" autocomplete="username" />
      <div class="input_container">
        <id-card-h class="icon" size="20" :strokeWidth="3" />
        <input
          autocomplete="new-username"
          placeholder="请输入用户名"
          type="text"
          class="input_field"
          v-model="loginRequest.username"
        />
      </div>
      <div class="input_container">
        <unlock class="icon" size="20" :strokeWidth="3" />
        <input
          autocomplete="new-password"
          placeholder="请输入密码"
          type="password"
          class="input_field"
          v-model="loginRequest.password"
        />
      </div>
      <button @click="login" title="Sign In" type="button" class="sign-in_btn">
        <span>登录</span>
      </button>
      <p class="note">Power by @BIU-FLINK</p>
    </form>
  </div>
</template>

<script setup lang="ts">
import Logo from '@/views/login/Logo.vue'
import { IdCardH, Unlock } from '@icon-park/vue-next'
import { onMounted, ref } from 'vue'
import type { LoginRequest } from '@/api/passport-api'
import { doIsLogin, doLogin } from '@/api/passport-api'
import { useLocalStorage } from '@vueuse/core'
import { useRouter } from 'vue-router'
import { ACCESS_TOKEN_NAME } from '@/utils/constants'
import Wallpaper from '@/components/wallpaper/Index.vue'

onMounted(() => {
  doIsLogin().then((res) => {
    if (res.data) {
      router.push({
        path: '/main'
      })
    }
  })
})

const loginRequest = ref<LoginRequest>({
  username: 'admin',
  password: 'biu-flink'
})
const accessToken = useLocalStorage(ACCESS_TOKEN_NAME, '')
const router = useRouter()

function login() {
  doLogin(loginRequest.value).then((res) => {
    if (res.data) {
      accessToken.value = res.data
      router.push('/main')
    }
  })
}
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
